<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>爱的日历</title>
    <link rel="stylesheet" href="http://1.95.157.217/static/reset.css" />
    <link rel="stylesheet" href="./style/calendar.css" />
    <link rel="stylesheet" href="./style/index.css" />
  </head>
  <body>
    <div class="calendar-wrapper">
      <div class="calendar-header" id="calendar-header">
        <!-- 月份标题将通过JS动态生成 -->
      </div>
      <div class="weekdays">
        <div class="weekday">日</div>
        <div class="weekday">一</div>
        <div class="weekday">二</div>
        <div class="weekday">三</div>
        <div class="weekday">四</div>
        <div class="weekday">五</div>
        <div class="weekday">六</div>
      </div>
      <div class="calendar-body" id="calendar-body">
        <!-- 日历内容将通过JS动态生成 -->
        <div class="loading">加载中...</div>
      </div>
      <div class="modal eventModal" id="eventModal">
        <button class="close-btn" id="eventCloseBtn">&times;</button>
        <div class="content">
          <p>
            <article>时间：</article>
            <input id="eventDate" />
          </p>
          <p>
            <article>标题：</article>
            <input id="eventTitle" />
          </p>
          <p>
            <article>内容：</article>
            <input id="eventDesc" />
          </p>
          <button class="sure-button" id="sureButton">确认</button>
        </div>
      </div>
      <div class="modal" id="modal">
        <button class="close-btn" id="closeBtn">&times;</button>
        <div class="content" id="modalContent"></div>
      </div>
    </div>
    <div class="event" id="event">
      <h1>重要事情<span id="lddyClick">/</span>纪念日</h1>
      <ul class="timeline">
      </ul>
    </div>
    <script defer src="./script/calendar.js"></script>
    <script defer type="module">
      import Calendar from "./script/calendar.js";
      window.Calendar = Calendar;
    </script>
    <script defer src="./script/index.js"></script>
  </body>
</html>
